<style>
    .description { color: #008678; text-decoration: underline; font-size: 13px; }
</style>

<form method="post" action="/oss/?r=operation/doBan">
    <{include file='../common_params.tpl'}>

    <div class="box box-black">
        <div class="box-body">
            <table class="table table-bordered">
                <colgroup>
                    <col style="width: 20%;"></col>
                    <col style="width: 80%;"></col>
                </colgroup>

                <tr>
                    <th class="th-label">服务器</th>
                    <td>
                        <select class="form-control" name="server">
                            <{html_options options=$serverList selected=$server}>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th class="th-label">封禁类型</th>
                    <td>
                        <select name="ban_type" id="sel-ban-type" class="form-control inline" style="width: 200px;">
                            <{html_options options=$banType}>
                        </select>

                        <label><input type="radio" name="status" value="1" class="simple" checked /> 封禁</label>
                        <label><input type="radio" name="status" value="0" class="simple" /> 解封</label>

                    </td>
                </tr>

                <tr>
                    <th class="th-label">
                        封禁列表
                        <div class="description" id="ban-description"></div>
                    </th>
                    <td>
                        <textarea class="form-control" rows="5" name="data" placeholder="多条信息用换行分隔"><{$uid}></textarea>
                    </td>
                </tr>

                <tr>
                    <th class="th-label">封禁截止日期</th>
                    <td>
                        <input type="text" name="ban_date" class="form-control inline time" />
                        <label><input type="checkbox" name="ban_forever" class="simple" id="ban-forever" />永久</label>
                    </td>
                </tr>

                <tr>
                    <th class="th-label">封禁原因</th>
                    <td>
                        <textarea class="form-control" name="reason"></textarea>
                    </td>
                </tr>
            </table>
        </div>

        <div class="box-footer">
            <button type="submit" class="btn btn-default pull-right">确认</button>
            <div style="clear: both;"></div>
        </div>
    </div>
</form>

<script type="text/javascript">
    $(function(){
        var tipMap = {
            'BanImei'       : '填写设备号',
            'BanIP'         : '填写IP地址',
            'BanRole'       : '填写角色名',
            'BanChat'       : '填写角色名',
            'BanAct'        : '填写用户账号',
            'BanChatAct'    : '填写用户账号',
        };

        $("#sel-ban-type").change(function(){
            var banType = $(this).val();
            $("#ban-description").html(tipMap[banType] || '');
        }).change();

        $(".time").datetimepicker({
            format: 'yyyy-mm-dd',
            datemode: 'dmUpDown',
            fontAwesome: true,
            todayBtn:  true,
            todayHighlight: true,
            autoclose: true,
            startView: 2,
            minView: 2
        });

        $("#ban-forever").click(function(){
            var timeInput = $(this).closest('td').find('.time');
            if($(this).is(":checked")){
                timeInput.prop('disabled', true);
            }else{
                timeInput.prop('disabled', false);
            }
        });
    });
</script>